<template>
    <div class="detail_module_panel other_info">
        <h2 style="line-height: 40px"><i class="el-icon-menu"><b> {{ $t('collection.currentOrderDetail') }}</b></i></h2>
        <span style="color: #47c5b2">{{ $t('common.innerOrderId') }}：{{ orderId }}
            <!-- <el-button type="text" style="margin-left: 20px;" @click="getAddressBook">查看通讯录</el-button> -->
        </span>
        <div class="panel_info_content">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column :label="$t('common.borrowAmount')" prop="contractAmount" min-width="120"></el-table-column><!--借款金额-->
                <el-table-column :label="$t('common.getAmount')" prop="loanAmount" min-width="120"></el-table-column><!--到手金额-->
                <el-table-column align="left" :label="$t('common.loanTime')" prop="startTime" min-width="150"></el-table-column><!--放款时间-->
                <el-table-column align="left" :label="$t('common.shouldRepayTime')" prop="repayTime" width="150"></el-table-column><!--应还时间-->
                <el-table-column align="left" :label="$t('common.shouldRepayCapital')" prop="shouldRepay" min-width="90"></el-table-column><!--应还本金-->
                <el-table-column align="left" :label="$t('common.shouldRepayPenaltyRate')" prop="lateCharge" min-width="90"></el-table-column><!--应还罚息-->
                <el-table-column align="left" :label="$t('common.shouldRepayLateFee')" prop="lateFee" min-width="110"></el-table-column><!--应还滞纳金-->
                <el-table-column align="left" :label="$t('common.overdueDays')" prop="lateDays" min-width="80"></el-table-column><!--逾期天数-->
                <el-table-column align="left" :label="$t('common.hasRepayAmount')" prop="payedAmount" min-width="90"></el-table-column><!--已还金额-->
                <el-table-column align="left" :label="$t('common.restRepay')" prop="restRepay" min-width="90"></el-table-column><!--挂账金额-->
                <el-table-column align="left" :label="$t('common.repayStatus')" prop="status" min-width="120"><!--还款状态-->
                    <template slot-scope="scope">{{ scope.row.status | repayStatusSwitch }}</template>
                </el-table-column>
            </el-table>
        </div>

        <alert-dialog title="通讯录" width="500px" :visible.sync="contactShow">
            <el-table :data="currentData" style="width: 100%;">
                <el-table-column prop="name" label="联系人" width="150"></el-table-column>
                <el-table-column prop="tel" label="手机号" width="150"></el-table-column>
                <el-table-column label="" min-width="50">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.tel"
                                   @click="call(scope.row)"
                                   class="btn_call_center"
                                   size="mini"
                                   type="text"
                                   icon="el-icon-phone">Call
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @current-change="changePage" :current-page="page.page" :page-size="page.limit"
                           layout="total, prev, pager, next"
                           :total="page.total">
            </el-pagination>
        </alert-dialog>
    </div>
</template>

<script>
    import alertDialog from '@/components/alert-dialog';
    import mixin from '@/service/mixin';
    import Pagination from '@/components/pagination';
    import EventBus from '@/libs/event-bus';
    import {eventConf} from '@/config/';

    let that = null;
    export default {
        name: 'current-order-detail',
        components: {
            alertDialog,
            Pagination
        },
        mixins: [mixin],
        props: {},
        data() {
            return {
                overdueInfoId: '',
                orderId: '',
                tableData: [],
                loanHistory: [],
                contactShow: false,
                userId: '',
                contactData: [],
                currentData: [],
                page: {
                    limit: 10, // 每页20条数据
                    // total: '',
                    page: 1,
                }
            };
        },
        methods: {
            // 订单具体信息
            getLastRepayScheduleDtoByOrderId() {
                const params = {
                    ycsOverdueInfoId: this.overdueInfoId,
                };
                this.$api.collection.getRepayScheduleInfoPre(params).then((res) => {
                    const {status, error, data} = res;
                    if (status === '1' && error === '00000000') {
                        this.tableData = data;
                    }
                });
            },
            // 获取通讯录列表
            getAddressBook() {
                this.contactShow = true;
                this.page.page = 1;
                const params = {
                    userId: this.userId,
                };
                this.$api.customer.getAddressBook(params).then((res) => {
                    const {status, error, data} = res;
                    if (status === '1' && error === '00000000') {
                        this.contactData = data;
                        this.dataSlice();
                        this.page.total = data.length;
                    }
                });
            },
            // 分页
            dataSlice() {
                let range = (this.page.page - 1) * this.page.limit;
                this.currentData = this.contactData.slice(range, range + this.page.limit);
            },
            changePage(val) {
                this.page.page = val;
                let range = (this.page.page - 1) * this.page.limit;
                this.currentData = this.contactData.slice(range, range + 10);
            },
            // 呼叫按钮
            call(row) {
                if (row.tel) {
                    const params = {
                        phone: row.tel.replace(/-/g, ""),
                        overdueInfoId: this.overdueInfoId,
                    };
                    const tel = row.tel;
                    const name = row.name;
                    this.$api.collection.callOutPre(params).then(res => {
                        const {status, data, error} = res;
                        if ('1' === status && '00000000' === error) {
                            const relationship = '其他';
                            EventBus.$emit(eventConf.CALL_EVENT, {
                                tel,
                                name,
                                relationship,
                                callRecordId: data
                            });
                        }
                    });
                }
            },
        },
        created() {
            that = this;
            const params = this.$route.params;
            this.overdueInfoId = params.id;
            this.orderId = params.orderId;
            this.userId = params.userId;
            this.getLastRepayScheduleDtoByOrderId();
        },
        filters: {
            // 还款状态
            repayStatusSwitch(repayStatus) {
                switch (repayStatus) {
                    case 'LATE_REPAYING':
                        return that.$t('common.overdueNotRepay');// 逾期未还款
                    case 'LATE_END':
                        return that.$t('common.overdueHasRepay');// 逾期已还款
                    case 'FINISHED':
                        return that.$t('common.notOverdueHasRepay');// 未逾期已还款
                    case 'UN_REPAY':
                        return that.$t('common.notOverdueNotRepay');// 未逾期未还款
                    default:
                        return '';
                }
            },
        },
    };
</script>

<style lang="scss" scoped>
    .video {
        background-color: rgba(0, 0, 0, 0.4) !important;
    }

    .video_icon {
        display: block;
        height: 100%;
        width: 100%;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 32px 32px;
        background-image: url("~@/assets/img/icon_video.png");
    }

    .check_loan_history {
        margin-left: 15px;
    }
</style>
